{extend name="template"}

{block name="body"}

<div class="gas-index layui-fluid padding-0">

    <!-- 导航栏 -->
    <div class="layui-row common-nav">
        {include file="common/header" /}
    </div>
    <!-- 搜索框 -->
    <div id="search_form" style="display: none;z-index:1000;position:absolute;">
        {include file="common/search" /}
    </div>

    <!-- 轮播图 -->
    <div class="layui-row index-carousel">
        <div class="layui-carousel" id="carousel" lay-filter="carousel">
            <div carousel-item>
                {foreach $carousel.list as $key=>$vo}
                     <div><img title="{$vo.title}" src="{$vo.thumb}"></div>
                {/foreach}
            </div>
        </div>
    </div>

    <!-- 会员单位统计 -->
    <div class="index-member">
        <div class="box">
            <div class="item">
                <div class="img"><i class="fa fa-gg-circle"></i></div>
                <div class="desc">
                    <span class="num">{$member.president}</span><br />
                    <span class="text">个会长单位</span>
                </div>
            </div>
            <div class="item">
                <div class="img"><i class="fa fa fa-gittip"></i></div>
                <div class="desc">
                    <span class="num">{$member.vpresident}</span><br />
                    <span class="text">个副会长单位</span>
                </div>
            </div>
            <div class="item">
                <div class="img"><i class="fa fa-bandcamp"></i></div>
                <div class="desc">
                    <span class="num">{$member.director}</span><br />
                    <span class="text">个理事单位</span>
                </div>
            </div>
            <div class="item">
                <div class="img"><i class="fa fa-user-circle-o"></i></div>
                <div class="desc">
                    <span class="num">{$member.member}</span><br />
                    <span class="text">个会员单位</span>
                </div>
            </div>
        </div>
    </div>


    <!--栏目 -->
    <div class="index-aboutus layui-row margin-top-20">
        <div class="index-content">
            <div class="layui-carousel aboutus" style="height:300px;" id="carousel2" lay-filter="carousel2">
                <div carousel-item>
                    {foreach $carousel2.list as $key=>$vo}
                    <div><a target="_blank" href="/aboutus/detail.html?id={$vo.id}"><img style="width:100%;height:100%;" src="{$vo.thumb}"></a></div>
                    {/foreach}
                </div>
                <div style="padding:3px 2%;font-size:14px;line-height:24px;width:96%;color:white;background-color: #000;opacity: 0.8;position:absolute;bottom:0;left:0;">
                    <div style="float: left;">
                    {foreach $carousel2.list as $key=>$vo}
                        {if $key eq 0}
                        <span class="aboutus-item">{$vo.title}</span>
                        {else}
                        <span class="aboutus-item" style="display: none;">{$vo.title}</span>
                        {/if}
                    {/foreach}
                    </div>
                    <div style="float: right;">
                        {foreach $carousel2.list as $key=>$vo}
                        {if $key eq 0}
                            <span class="aboutus-item-page layui-badge" style="cursor:pointer;margin-right:4px;">{$key+1}</span>
                        {else}
                            <span class="aboutus-item-page layui-badge layui-bg-gray" style="cursor:pointer;margin-right:4px;">{$key+1}</span>
                        {/if}
                    {/foreach}
                    </div>
                </div>
            </div>
            <div class="edu">
                <div class="header">
                    <span class="icon"></span>
                    <span class="title">{$edu.info.title}</span>
                    <span class="more"><a href="/edu/list.html">更多>></a></span>
                </div>
                <div class="body">
                    <ul>
                        {foreach $edu.list as $key=>$vo}
                        <li>
                            <span class="nav-icon padding-right-5 fa fa-square dot"></span>
                            <a class="pull-left" style="color:inherit" target="_blank" href="/edu/detail.html?id={$vo.id}">{$vo.title|mb_substr=0,30,'utf-8'}</a>
                            <span class="pull-right">{$vo.create_at|format_datetime='Y-m-d'}</span>
                        </li>
                        {/foreach}
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="index-row2 layui-row margin-top-20">
        <div class="index-content">
            <div class="news">
                <div class="header">
                    <span class="icon"></span>
                    <span class="title">{$news.info.title}</span>
                    <span class="more"><a href="/news">更多>></a></span>
                </div>
                <div class="body">
                    {foreach $news.list as $key=>$vo2}
                    <dl style="clear: both;">
                        <dt class="pull-left">
                            <img title="{$vo2.title}"  src="{$vo2.thumb}">
                        </dt>
                        <dd class="pull-left">
                            <p><a href="/news/detail.html?id={$vo2.id}">{$vo2.title}</a></p>
                            <p>
                                {$vo2.digest|mb_substr=0,70,'utf-8'}
                                <span style="padding:0 20px 0 0;">...</span>
                            </p>
                            <p>{$vo2.create_at|format_datetime='Y-m-d'}</p>
                        </dd>
                    </dl>
                    {/foreach}
                </div>

            </div>
            <div class="policy">
                <div class="header">
                    <span class="icon"></span>
                    <span class="title">{$policy.info.title}</span>
                    <span class="more"><a href="/policy.html?id={$policy.info.id}">更多>></a></span>
                </div>
                <div class="body margin-top-10">
                    <ul>
                        {foreach $policy.list as $key=>$vo}
                        <li>
                            <span class="nav-icon padding-right-5 fa fa-square dot"></span>
                            <a class="pull-left" style="color:inherit" target="_blank" href="/policy/detail.html?id={$vo.id}">{$vo.title}</a>
                            <span class="pull-right">{$vo.create_at|format_datetime='Y-m-d'}</span>
                        </li>
                        {/foreach}
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row index-product margin-top-20">
        <div class="index-content">
            <div class="header">
                <span class="icon"></span>
                <span class="title">{$product.info.title}</span>
                <span class="more"><a href="/product.html">更多>></a></span>
            </div>
            <div class="body margin-top-10">
                {foreach $product.list as $key=>$vo2}
                <div class="item">
                    <div>
                        <a href="/product.html">
                            <img title="{$vo2.name}" src="{$vo2.logo}">
                        </a>
                    </div>
                    <div style="text-align: center;"><!--燃气设施设备产品-->
                        <a style="color:inherit;" href="/product.html">{$vo2.name}</a>
                    </div>
                </div>
                {/foreach}
            </div>
        </div>
    </div>
    {include file="common/footer" /}

</div>

{/block}

{block name='style'}
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<script>if (location.href.indexOf('#') > -1) location.replace(location.href.split('#')[0])</script>
<link rel="stylesheet" href="__ROOT__/static/index/index.css">
{/block}

{block name='script'}
<script src="__ROOT__/static/index/index.js"></script>
<script>
    let option2 = {
        elem: '#carousel2'
        ,width: '600px' //设置容器宽度
        ,height: '280px'
        ,arrow: 'none' //始终显示箭头
        //,anim: 'updown' //切换动画方式
        ,indicator: 'none'
        ,index: 0
    }
    let carousel;
    layui.use('carousel', function(){
        carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#carousel'
            ,width: '100%' //设置容器宽度
            ,height: '460px'
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
            //,indicator: 'outside'
            ,index:0
        });
        //建造实例
        carousel.render(option2);
        carousel.on('change(carousel2)', function(obj){ //test1来源于对应HTML容器的 lay-filter="test1" 属性值
            $(".aboutus-item").each(function (index, elem) {
                if(obj.index == index){
                    $(elem).show();
                }else{
                    $(elem).hide();
                }
            });
            $(".aboutus-item-page").each(function (index, elem) {
                if(obj.index == index){
                    $(elem).removeClass("layui-bg-gray");
                }else{
                    $(elem).addClass("layui-bg-gray");
                }
            });

        });
        $(".aboutus-item-page").click(function () {
            let index = parseInt($(this).html())-1;
            $(".aboutus .layui-carousel-ind ul li").get(index).click();
        });
    });
</script>
{/block}
